<!-- 个人中心 -->
<template>
    <div class="memder_box">
        <div class="mem_box_top">
            <div class="m_b_t_left">
                <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/avatar/2022-05-14/f6bafcfc-a840-4a81-9907-939ee56dff4d.jpg"
                    alt="">
                <p>Did</p>
            </div>
            <div class="m_b_t_right">
                <a href="javascrip:;">
                    <i class="iconfont">&#xe6b5;</i>
                    <p>会员中心</p>
                </a>
                <a href="javascrip:;">
                    <i class="el-icon-setting"></i>
                    <p>安全设置</p>
                </a>
                <a href="javascrip:;">
                    <i class="el-icon-location-outline"></i>
                    <p>地址管理</p>
                </a>
            </div>
        </div>
        <div class="home_panel">
            <div class="panel_hander">
                <div class="pan_han_tit">我的收藏</div>
                <router-link to="/" class="xtx_more">查看更多<i class="el-icon-arrow-right"></i></router-link>
            </div>
            <div class="goods_list">
                <a href="javascript:;" class="pan_goods_item" v-for="item in goods.slice(0, 4)" :key="item.id">
                    <img :src="item.spu.picture" alt="">
                    <p class="pan_name">{{ item.spu.name }}</p>
                    <p class="pan_desc">{{ item.spu.desc }}</p>
                    <p class="pan_price">￥{{ item.spu.price }}</p>
                </a>
            </div>
        </div>
        <div class="home_panel">
            <div class="panel_hander">
                <div class="pan_han_tit">我的足迹</div>
                <router-link to="/" class="xtx_more">查看更多<i class="el-icon-arrow-right"></i></router-link>
            </div>
            <div class="goods_list">
                <a href="javascript:;" class="pan_goods_item" v-for="item in 4" :key="item">
                    <img src="https://yanxuan-item.nosdn.127.net/fcdcb840a0f5dd754bb8fd2157579012.jpg" alt="">
                    <p class="pan_name">自煮火锅不排队 麦饭石不沾鸳鸯火锅</p>
                    <p class="pan_desc">清汤鲜香 红汤劲爽</p>
                    <p class="pan_price">￥159.00</p>
                </a>
            </div>
        </div>
        <div class="relvant">
            <div class="relvant_heanfer">
                <i class="reveant_icon"></i>
                <p>猜你喜欢</p>
            </div>
            <div class="relvant_list">
                <el-carousel :interval="5000" arrow="always" :autoplay='false' trigger="click">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <div class="relvant_list">
                            <router-link :to="'/home/Details?id='+arr.id" class="rel_list_item" v-for="arr in list.slice(0 * item, 4 * item)" :key="arr.id">
                                <img :src="arr.picture" alt="">
                                <p class="rel_item_tit">{{ arr.name }}</p>
                                <p class="rel_item_price">￥{{ arr.price }}</p>
                            </router-link>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "memderBox",
    data() {
        return {
            goods: [],
            list: [],
        }
    },
    mounted() {
        this.$axios('/member/browseHistory').then(res => {
            this.goods = res.data.result.items
            // console.log(this.goods);
        })
        this.$axios('/goods/relevant?id=&limit=16').then(res => {
            this.list = res.data.result
            // console.log(this.list);
        })


    }
}
</script>
<style scoped lang="less">
.memder_box {
    flex: 1;
    margin-bottom: 20px;

    .mem_box_top {
        height: 132px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: url("http://erabbit.itheima.net/img/center-bg.31e0daef.png") no-repeat;
        background-size: cover;

        .m_b_t_left {
            display: flex;
            flex: 1;
            align-items: center;

            img {
                width: 85px;
                height: 85px;
                border-radius: 50%;
                margin-left: 60px;
            }

            p {
                padding-left: 26px;
                font-size: 18px;
                font-weight: 400;
                color: #fff;
            }
        }

        .m_b_t_right {
            display: flex;
            flex: 1;
            justify-content: space-around;

            a {
                display: block;
                text-align: center;

                i {
                    font-size: 32px;
                    color: #fff;
                    line-height: 32px;
                    display: block;
                    margin-bottom: 10px;
                }

                p {
                    color: #fff;
                    font-size: 16px;
                    line-height: 32px;

                }
            }
        }
    }

    .home_panel {
        padding: 0 20px;
        margin-top: 20px;
        background: #fff;
        height: 400px;

        .panel_hander {
            padding: 18px 0;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f5f5f5;
            align-items: baseline;

            .pan_han_tit {
                font-size: 22px;
                font-weight: 400;
            }

            .xtx_more {
                font-size: 16px;
                color: #999;
                margin-right: 4px;
            }
        }

        .goods_list {
            display: flex;
            justify-content: space-around;
            padding-top: 20px;

            .pan_goods_item {
                display: block;
                padding: 20px 30px;
                width: 220px;
                text-align: center;
                transition: all .5s;
                box-sizing: border-box;
                color: #000;

                img {
                    width: 160px;
                    height: 160px;
                }

                .pan_name {
                    font-size: 16px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    padding-top: 10px;
                }

                .pan_desc {
                    color: #999;
                    padding-top: 10px;
                    font-size: 14px;
                }

                .pan_price {
                    color: #cf4444;
                    font-size: 20px;
                    padding-top: 10px;

                }

                &:hover {
                    box-shadow: 0 4px 8px 4px #eee;
                    transform: translateY(-3px);
                }
            }
        }
    }

    .relvant {
        background: #fff;
        margin-top: 20px;
        min-height: 460px;

        .relvant_heanfer {
            height: 80px;
            line-height: 80px;
            box-sizing: border-box;
            padding: 0 20px;
            display: flex;
            align-items: center;

            .reveant_icon {
                width: 16px;
                height: 16px;
                display: inline-block;
                border-top: 4px solid #27ba9b;
                border-right: 4px solid #27ba9b;
                box-sizing: border-box;
                position: relative;
                transform: rotate(45deg);

                &::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    left: 0;
                    top: 2px;
                    background: #bcf1e6;
                }
            }

            p {
                font-size: 20px;
                padding-left: 10px
            }
        }
    }

}
</style>
<style lang="less">
.memder_box .el-carousel--horizontal {
    height: 340px;
}

.memder_box .el-carousel__item .relvant_list {
    padding: 0 40px;
    display: flex;
    justify-content: space-around;

    .rel_list_item {
        width: 240px;
        text-align: center;

        img {
            box-sizing: border-box;
            padding: 20px;
            width: 230px !important;
            height: 230px !important;
        }

        .rel_item_tit {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 16px;
            color: #666;
            padding: 0 40px;
        }

        .rel_item_price {
            margin-top: 15px;
            font-size: 16px;
            color: #cf4444
        }
    }
}

.memder_box .el-carousel__indicators--horizontal {
    .el-carousel__indicator--horizontal {
        .el-carousel__button {
            width: 12px;
            height: 12px;
            background: rgba(0, 0, 0, .2);
            border-radius: 50%;
            padding: 0;
            margin-left: 12px;
        }

    }

    .is-active .el-carousel__button {
        background: #27ba9b
    }
}
.memder_box .el-carousel__arrow--left{
    left:5px;
}
.memder_box .el-carousel__arrow--right{
    right:5px
}
.memder_box .el-carousel__arrow{
    top:40%;
}
</style>